<template>
    <div id="app">
        <transition name="fade" mode="out-in">
            <router-view v-if="isRouterAlive"></router-view>
        </transition>
    </div>
</template>

<script>
export default {
    provide() {
        return {
            reload: this.reload
        }
    },
    data() {
        return {
            isRouterAlive: true
        }
    },
    created() {
        this.getInitList()
    },
    methods: {
        // 获取系统初始化数据
        getInitList() {
            this.$api.init.getInitData().then(res => {
                if(res.data.code === 2000) {
                    console.log("sys init ....")
                    console.log(res.data.data.theme.v)
                    this.initTheme(res.data.data.theme.v)
                }
            })
        },
        // 动态刷新
        reload() {
            this.isRouterAlive = false
            this.$nextTick(() => {
                this.isRouterAlive = true
            });
        },
        // 动态加载主题
        initTheme(value) {
            import('./assets/css/'+value);
        }
    }
}
</script>

<style lang="less">
/* 引入主题样式 */
@import 'assets/css/theme_six.css';
#app {
    height: 100%;
}
/* 消失时间持续1s */
.fade-enter-active {
    transition: all 3s;
}
/* 显示时间持续1s */
.fade-leave-active {
    transition: all 1s;
}
/* 背景虛化 */
.fade-enter,
.fade-leave-active {
    opacity: 0;
}
// 表格背景
.el-table th {
    background: #f5f7fa !important;
}
// 表格排序图标
.el-table .caret-wrapper {
    height: 20px !important;
}
// 全局边距
.container {
    margin: 0 10px 0 10px;
}
// 全局栅格底部距离
.el-row {
    margin-bottom: 10px;
    &:last-child {
        margin-bottom: 0;
    }
}
// 全局模态框标题底部线条
.el-dialog__header {
    border-bottom: 1px solid #e8e8e8 !important;
}
.el-dialog__footer {
    border-top: 1px solid #e8e8e8 !important;
}
// 全局表格标识颜色
.globe-title-color{
    color: #1890FF !important;
}
// 全局搜索栏与table对齐
.el-card__header{
    padding: 18px 10px !important;
}

// 全局设置右边抽屉打开布局
.el-drawer__header {
    color: #20222a !important;
    margin-bottom: 10px !important;
    padding: 20px 20px 10px !important;
    border-bottom: 1px solid #e8e8e8 !important;
    font-size: 15px !important;
}
.drawer-table{
    padding: 0 30px !important;
    height: 84.5vh !important;
    overflow: auto !important;
    border-bottom: 1px solid #e8e8e8 !important;
}
.drawer-footer{
    position: fixed !important;
    bottom: 0 !important;
    padding: 10px 30px !important;
}
// 请求进度条自定义颜色
#nprogress .bar {
    background: #1890ff !important;
}
</style>
